<template>
	<div id="index">
		<el-container>
			<el-header>
				<div class="headerBox">
					<el-row>
						<el-col :span="4">
							<div class="grid-content bg-purple logo">
								<img src="../../assets/img/logo.jpg" alt="">
							</div>
						</el-col>
						<el-col :span="13">
							<div class="grid-content bg-purple-light menu">
								<ul>
									<li @click="goIntrodunce">マキマキとは</li>
									<!-- <li>お問い合わせ</li>
									<li>よくあるご質問</li>
									<li>
										<i class="el-icon-search"></i>
									</li> -->
								</ul>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple loginBox">
								<span @click="goLogin" class="login">ログイン</span>
								<span @click="goSign" class="sign">新規登録</span>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-header>
			<el-main>
				<div class="banner">
					<el-carousel :interval="5000" arrow="always" height="714px">
						<el-carousel-item v-for="item in bannerImg" :key="item.id">
							<img :src="item.url" :alt="item.title">
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="serial-comics">
					<div class="title">
						<h1>連載マンガ</h1>
						<p>「啥时能核算岗has傻姑娘啊送达!」</p>
					</div>
					<div class="comics-box">
						<ul>
							<li v-for="(item, index) in serialData" :key="index">
								<div>
									<img :src="item.url" :alt="item.title">
								</div>
								<div>
									<span>
										<font>{{ item.author }}</font>
									</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="system-service">
					<div class="title">
						<img src="../../assets/img/pcimg/bottom-3.png" alt="">
						<h2>マッチング情報</h2>
					</div>
					<div class="content">
						<div>
							<img src="../../assets/img/pcimg/computer-1.png" alt="">
						</div>
						<div>
							<ul>
								<li v-for="(item, index) in serData" :key="index"><i><img :src="item.cionurl"
											alt=""></i><span>{{ item.text }}</span></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="new-project">
					<div class="project-box">
						<ul>
							<li v-for="(item, index) in newProject" :key="index">
								<div class="img-box">
									<p> {{ item.title }} </p>
									<i>
										<img :src="item.url" alt="">
									</i>
								</div>
								<div class="content">
									<span>
										<font>{{ item.author }}</font>
									</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</el-main>
			<div class="box4">
					<div class="content">
						<div class="title">
							<i></i>
							<span>マキマキのある未来で起きること</span>
						</div>
						<div class="text-img">
							<div class="imgOne">
								<div>
									<i></i>
									<div>
										<p>さまざまな人材が活躍できる</p>
										<span>
											漫画家や作画アシスタントのみならず、キャラクターデザインや背景デザイン、進捗管理マネージャーなど、多様な役割を設けることで、より分業化されさまざまな人材がマンガ創りの現場で活躍できるようになります
										</span>
									</div>
								</div>
								<p>
									<img src="../../assets/img/pcimg/tuan1-1.png" alt="">
								</p>
							</div>
							<div class="imgTwo">
								<p>
									<img src="../../assets/img/pcimg/tuan2-1.png" alt="">
								</p>
								<div>
									<i></i>
									<div>
										<p>収益分配構造のアップデート</p>
										<span>
											「すべてのメンバーに印税を」<br>
											マキマキで提供予定の「収益分配機能」ではプロジェクトごとに分配ルールを設定することができ、作品に対する収益をオンライン上で自動で振り分ける仕組みを提供します。（coming soon）
										</span>
									</div>
								</div>
							</div>
							<div class="imgThree">
								<div>
									<i></i>
									<div>
										<p>マッチングの最適化</p>
										<span>
											ユーザーの登録情報やシステムの利用実績をもとに
											マッチ度の高いパートナーや、プロジェクトなどを自動でお勧めします。
										</span>
									</div>
								</div>
								<p>
									<img src="../../assets/img/pcimg/tuan3-1.png" alt="">
								</p>
							</div>
							<div class="imgFour">
								<p>
									<img src="../../assets/img/pcimg/tuan4-1.png" alt="">
								</p>
								<div>
									<i></i>
									<div>
										<p>オンライン分業に改革を</p>
										<span>
											チーム制作の際の分業管理について、柔軟にカスタマイズ可能になります。
											作画チェックのための機能や、進捗管理の機能も提供します。
											制作物は工程ごとに履歴管理され、万が一の手戻りが発生しても作業前のデータに戻すことができます。
											作業中のロック機能などもあり、安心して協業ができます。
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			<div class="box-bottom">
				<div>
					<span>copyringht@2022卜算子·株式会社</span>
					<div>
						<img :src="cionurl" alt="">
						<img :src="cionur2" alt="">
					</div>
				</div>
			</div>
		</el-container>
	</div>
</template>

<script>
// import service from '@/service'
// import utils from '@/assets/js/utils'
export default {
	name: "home",
	data() {
		return {
			bannerImg: [
				// {url:require('../../assets/img/banner/1.png'),title:"111",id:1},
				// {url:require('../../assets/img/banner/2.png'),title:"222",id:2},
				{ url: require('../../assets/img/banner/4.jpg'), title: "333", id: 3 }
			],
			serData: [
				{
					cionurl: require('../../assets/img/pcimg/iconimg1-1.png'),
					text: "机能"
				},
				{
					cionurl: require('../../assets/img/pcimg/iconimg2-1.png'),
					text: "机能"
				},
				{
					cionurl: require('../../assets/img/pcimg/iconimg3-1.png'),
					text: "机能"
				},
				{
					cionurl: require('../../assets/img/pcimg/iconimg4-1.png'),
					text: "机能"
				}
			],
			serialData: [
				{
					id: 1,
					url: require('../../assets/img/pcimg/imgtop3-1.png'),
					title: "夏目友人帐",
					author: "气死你哈省倪虹洁阿说你啥哼",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 2,
					url: require('../../assets/img/pcimg/imgtop1-1.png'),
					title: "火影忍者",
					author: "气死你哈省倪虹洁阿说你啥哼",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 3,
					url: require('../../assets/img/pcimg/imgtop3-1.png'),
					title: "死神",
					author: "气死你哈省倪虹洁阿说你啥哼",
					edit: "黄四郎",
					press: "国际出版社"
				}
			],
			newProject: [
				{
					id: 2,
					url: require('../../assets/img/pcimg/lucencyimg1-1.png'),
					title: "火影忍者啥UN钢塑昂算算算",
					author: "气死你哈省倪虹洁阿说你啥哼双红纱能护嗓has的阿斯丹双红纱能哈十三娘轧空都能拉塞",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 4,
					url: require('../../assets/img/pcimg/lucencyimg2-1.png'),
					title: "海贼王",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 2,
					url: require('../../assets/img/pcimg/lucencyimg3-1.png'),
					title: "火影忍者",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				},
				{
					id: 4,
					url: require('../../assets/img/pcimg/lucencyimg4-1.png'),
					title: "海贼王",
					author: "张麻子",
					edit: "黄四郎",
					press: "国际出版社"
				}
			],
			newImgarr: [
				{
					id: 1,
					url: require('../../assets/img/pcimg/tuan1-1.png'),
					title: "さまざまな人材が活躍できる",
					press: "漫画家や作画アシスタントのみならず、キャラクターデザインや背景デザイン、進捗管理マネージャーなど、多様な役割を設けることで、より分業化されさまざまな人材がマンガ創りの現場で活躍できるようになります"
				},
				{
					id: 2,
					url: require('../../assets/img/pcimg/tuan2-1.png'),
					title: "収益分配構造のアップデート",
					press: "「すべてのメンバーに印税を」マキマキで提供予定の「収益分配機能」ではプロジェクトごとに分配ルールを設定することができ、作品に対する収益をオンライン上で自動で振り分ける仕組みを提供します。（coming soon）"
				},
				{
					id: 3,
					url: require('../../assets/img/pcimg/tuan3-1.png'),
					title: "マッチングの最適化",
					press: "ユーザーの登録情報やシステムの利用実績をもとにマッチ度の高いパートナーや、プロジェクトなどを自動でお勧めします,只是你不知道罢了,我希望你过的幸福且有意义"
				},
				{
					id: 4,
					url: require('../../assets/img/pcimg/tuan4-1.png'),
					title: "オンライン分業に改革を",
					press: "チーム制作の際の分業管理について、柔軟にカスタマイズ可能になります。作画チェックのための機能や、進捗管理の機能も提供します。制作物は工程ごとに履歴管理され、万が一の手戻りが発生しても作業前のデータに戻すことができます。作業中のロック機能などもあり、安心して協業ができます。"
											
				}
			],
			cionurl: require('../../assets/img/pcimg/iconimg1-1.png'),
			cionur2: require('../../assets/img/pcimg/iconimg2-1.png'),
		}
	},
	mounted() {

	},
	filters: {
		fifer(val) {
			console.log(val);
			val = val < 10 ? "0" + val : val
			return val
		}
	},
	methods: {
		handleSelect(item) {

		},
		goSign() {
			this.$router.push('/sign')
		},
		goLogin() {
			this.$router.push('/login')
		},
		goIntrodunce() {
			this.$router.push('/introduce')
		}
	},

}
</script>
<style lang="scss" scoped>
#index {
	width: 100%;
	height: auto;
	font-family: "华文采云";

	.el-container {
		.el-header {
			height: 110px !important;
			padding: 0;

			.headerBox {
				width: 77%;
				margin: 0 auto;
				flex-wrap: nowrap;
				align-items: center;
				height: 100%;
				line-height: 100%;

				.el-row {
					height: 100%;

					>div {
						height: 100%;

						.logo {
							display: flex;
							align-items: center;
							height: 100%;

							img {
								width: 50%;
								// object-fit: none;
							}
						}

						.menu {
							display: flex;
							align-items: center;
							height: 100%;
							justify-content: flex-end;

							ul {
								display: flex;
								align-items: center;

								li {
									@media (max-width:1024px) {
										font-size: 16px;
										padding: 0 22px;
									}

									font-size: 20px;
									padding: 0 35px;
									cursor: pointer;

									i {
										font-size: 28px;
									}
								}
							}
						}

						.loginBox {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							height: 100%;

							span {
								@media (max-width:1024px) {
									font-size: 16px;
									height: 35px;
									line-height: 35px;
									width: 80px;
								}

								display: block;
								width: 124px;
								height: 50px;
								border-radius: 25px;
								text-align: center;
								line-height: 50px;
								font-size: 20px;
								cursor: pointer;
							}

							.login {
								background: #F03747;
								color: #fff;
								margin-right: 20px;
							}

							.sign {
								background: #FFFFFF;
								border: 2px solid #F03747;
								color: #F03747;
							}
						}

						.search {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 100%;

							i {
								font-size: 28px;
								cursor: pointer;
							}
						}
					}
				}
			}
		}

		.el-main {
			padding: 0;

			.el-carousel__container {
				img {
					width: 100%;
					height: 100%;
				}
			}

			.serial-comics {
				overflow: hidden;
				background: url(../../assets/img/pcimg/topimg25\.png) center no-repeat;
				background-size: 100% 100%;

				.title {
					margin-top: 110px;

					h1 {
						text-align: center;
						font-size: 50px;
						width: 70%;
						margin: 0 auto;
						font-weight: 500;
					}

					h1:before,
					h1:after {
						content: "";
						width: 13%;
						height: 1px;
						display: block;
						position: relative;
					}

					h1:before {
						top: 36px;
						left: 25%;

						@media (max-width:1024px) {
							top: 36px;
							left: 18%;
						}
					}

					h1:after {
						top: -31px;
						right: -62%;

						@media (max-width:1024px) {
							top: -31px;
							right: -70%;
						}
					}

					p {
						text-align: center;
						font-size: 30px;
						margin-top: 15px;
					}
				}

				.comics-box {
					width: 77%;
					margin: 0 auto;
					margin-top: 40px;

					ul {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						width: 100%;

						li {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
							width: 27%;
							cursor: pointer;
							margin-bottom: 30px;
							text-align: center;
							box-sizing: border-box;

							>div:first-child {
								max-height: 325px;
								position: relative;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								align-items: center;

								img {
									width: 100%;
									height: 100%;
									align-items: center;
								}

								@media (max-width:1024px) {
									height: 180px;
								}

								img {
									width: 100%;
									// object-fit: none;

									@media (max-width:1024px) {
										width: 100%;
										height: 100%;
										// object-fit: none;
									}
								}
							}

							>div:last-child {
								margin-top: 20px;
								span {
									display: inline-block;
									margin-bottom: 7px;
									margin-right: 14px;

								}
							}
						}

						li:nth-child(8) {
							margin-right: 0px !important;
						}

						li:hover {
							box-shadow: 5px 5px 17px #ddd;
						}
					}

					>div {
						display: flex;
						justify-content: center;
						margin-top: 30px;

						span {
							display: block;
							width: 271px;
							height: 81px;
							line-height: 81px;
							background: #FFFFFF;
							border: 1px solid #999999;
							border-radius: 40px;
							text-align: center;
							color: #333;
							font-size: 30px;
							cursor: pointer;
						}
					}
				}
			}

			.system-service {
				width: 100%;
				height: 750px;
				margin: 50px 0 0 0;
				background: url(../../assets/img/pcimg/bottomimg25-2\.png) center no-repeat;
				background-size: 100% 100%;

				>div.title {
					text-align: center;

					img {
						width: 100px;
					}

					h2 {
						text-align: center;
						font-size: 65px;
						font-weight: 500;
						opacity: 0.8;
						letter-spacing: 8px;
						margin-top: 15px;
					}
				}

				.content {
					display: flex;
					width: 100%;
					margin: 0 auto;
					display: flex;
					margin-top: 150px;

					>div:first-child {
						display: flex;
						justify-content: center;
						width: 50%;
						max-height: 400px;
						height: 400px;
						align-items: center;
						margin-left: 100px;

						img {
							width: 100%;
							height: 100%;
							align-items: center;
						}
					}

					>div:last-child {
						ul {
							margin-top: 50px;

							li {
								display: flex;
								padding: 5px 0;

								i {
									display: flex;
									justify-content: center;

									img {
										width: 100%;
										height: 100%;
										align-items: center;
									}
								}

								span {
									font-size: 20px;
									line-height: 50px;
									margin-left: 10px;
								}
							}
						}
					}

				}
			}

			.new-project {
				width: 100%;
				// height: 450px;
				background-color: red;

				.title {
					h1 {
						color: #37414E;
						text-align: center;
						font-size: 50px;
						width: 70%;
						margin: 0 auto;
						font-weight: 500;
					}

					h1:before,
					h1:after {
						content: "";
						width: 13%;
						height: 1px;
						background: #333;
						display: block;
						position: relative;
					}

					h1:before {
						top: 36px;
						left: 25%;

						@media (max-width:1024px) {
							top: 36px;
							left: 18%;
						}
					}

					h1:after {
						top: -31px;
						right: -62%;

						@media (max-width:1024px) {
							top: -31px;
							right: -70%;
						}
					}

					p {
						text-align: center;
						color: #858B93;
						font-size: 30px;
						margin-top: 10px;
					}
				}

				.project-box {
					width: 77%;
					margin: 0 auto;
					padding: 100px 0;
					ul {
						display: flex;
						justify-content: space-between;

						>li {
							position: relative;
							width: 23%;
							height: auto;

							>div.img-box {
								width: 200px;
								height: 200px;
								border: 2px solid #ffff;
								border-radius: 50%;
								text-align: center;
								justify-content: center;
								font-size: 18px;
								color: #fff;


								p {
									height: 50px;
									padding: 0 60px;
									margin-top: 30px;
									align-items: center;
									overflow: hidden;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
								}

								i {
									display: block;
									display: flex;
									justify-content: center;
									align-items: center;
								}

								i img {
									max-width: 100px;
									max-height: 100px;
									min-height: 100px;
								}	
								@media (max-width:1024px) {
									height: 300px;

									img {
										width: 100%;
										max-height: 100px;
										object-fit: none;
									}
								}
							}

							.content {
								width: 100%;
								bottom: 1%;
								box-sizing: border-box;
								color: #fff;
								text-align: center;

								@media (max-width:1024px) {
									bottom: 1%;
								}

								span {
									display: inline-block;
									margin-top: 30px;
									font-size: 20px;

									font {
										color: #fff;
										overflow: hidden;
										-webkit-line-clamp: 4;
										text-overflow: ellipsis;
									}
								}
							}
						}

						li:last-child {
							margin-right: 0 !important;
						}
					}

				}
			}
		}

	}

	.box4 {
				background: url(../../assets/img/pcimg/bottomImg1.png);
				background-repeat: no-repeat;
				background-size: 100%;
				background-position-y: bottom;
				padding-bottom: 125px;

				.content {
					width: 80%;
					margin: 0 auto;

					.title {
						margin-top: 50px;
						i {
							display: block;
							width: 70px;
							height: 7px;
							border-radius: 5px;
							background-color: rgb(241, 55, 71);
						}
						span {
							display: block;
							margin-top: 5px;
							display: block;
							font-size: 35px;
							letter-spacing: 2px;
							font-weight: 540;
							color: #000;
						}
					}
					.text-img {
						margin-top: 50px;
						>div {
							display: flex;
							justify-content: space-between;
							>div {
								width: 60%;
								display: flex;
								margin-top: 60px;
								i {
									display: block;
									width: 100px;
									height: 100px;
								}
								>div {
									flex: 1;
									margin-left: 20px;
										p {
											font-weight: 600;
											letter-spacing: 3px;
											font-size: 20px;
											color: #4b4b4b;
										}
										span {
											display: block;
											margin-top: 10px;
											font-size: 16px;
											letter-spacing: 5px;
											color: #4b4b4b;
											line-height: 24px;
										}
								}
							}
							>p {
								width: 40%;
								display: flex;
								justify-content: end;
								img {
									max-width: 100%;
								}
							}
						}
						.imgOne {
							>div {
								i {
									background: url("../../assets/img/pcimg/01.png");
									background-repeat: no-repeat;
									background-size: 100%;
								}
							}
						}
						.imgTwo {
							>div {
								i {
									background: url("../../assets/img/pcimg/02.png");
									background-repeat: no-repeat;
									background-size: 100%;
								}
							}
						}
						.imgThree {
							>div {
								i {
									background: url("../../assets/img/pcimg/03.png");
									background-repeat: no-repeat;
									background-size: 100%;
								}
							}
						}
						.imgFour {
							>div {
								i {
									background: url("../../assets/img/pcimg/04.png");
									background-repeat: no-repeat;
									background-size: 100%;
								}
							}
						}
					}
				}
				
			}

	.box-bottom {
		display: flex;
		width: 100%;
		padding: 20px 0;
		background-color: #333;

		>div {
			width: 80%;
			display: flex;
			margin: 0 auto;
			justify-content: space-between;
			align-items: center;
			color: #ffff;

			img:first-child {
				margin-right: 20px;
			}

		}
	}
}

.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}
</style>